<template>
	<view class="login-content">
		<view class="header">
			<view class="title1">
				<text class="text1">欢迎使用</text>
				<text class="text2">旅游青山</text>
			</view>
			<view class="title2">
				<text>家庭旅游，开心快乐</text>
			</view>
		</view>
		
		<view class="bgimage">
			<image src="../../static/xx.png"></image>
		</view>
		
		<view class="button-login">
			<view class="btn-wetchat-style" :hover-class="true">
				<view class="btn-wetchat">
					<image src="../../static/login/wetchat.png"></image>
					<text>微信用户一键登录</text>
				</view>
			</view>
			
			
			<view class="btn-phone">
				<text>手机号登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.login-content {
		width: 750rpx;
		// 登录顶部标题
		.header {
			margin-top: 30rpx;
			margin: 0 60rpx;
			
			.title1 {
				width: 100%;
				font-size: 50rpx;
				
				.text2 {
					margin-left: 20rpx;
					font-weight: 700;
				}
			}
			.title2 {
				margin-top: 20rpx;
				color: #747989;
			}
		}
		
		.bgimage {
			margin-top: 30rpx;
			margin-bottom: 100rpx;
			width: 100%;
			height: 700rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.button-login {
			margin: 0 60rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// 微信登录样式
			.btn-wetchat-style {
				width: 100%;	
				height: 95rpx;
				border-radius: 20rpx;
				background-image: linear-gradient(to right, #85e491, #67c483);
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			
				.btn-wetchat {
					margin: 0 auto;
					display: flex;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
					}
					
					text {
						padding-left: 20rpx;
						font-size: 30rpx;
						color: #FFFFFF;
					}
				}
			}
		
			// 手机号登录
			.btn-phone {
				margin-top: 60rpx;
				font-size: 27rpx;
			}
		}
		
	}
</style>
